<template>
    <div class="my_service">
        <h2 class="title f28">我的服务</h2>
        <ul>
            <li v-for="(item, key) in serviceList" :key="key">
                <p class="latel f28">{{item.serviceName}}</p>
                <p class="price f28">￥{{item.price <= 0 ? '0-100' : item.price}}</p>
                <p class="operation">
                    <!-- <span class="f26">编辑</span> -->
                    <span class="f26" @click="shanchu(item.id, true)">删除</span>
                </p>
            </li>
        </ul>
        <div class="time_inp" v-show="true">
            <span class="time_tit f28">回复时长</span>
            <p class="duration">{{timeChang}}分钟</p>
            <em @click="openTime(true, false)">修改</em>
        </div>
        <div class="btn">
            <button @click="addService()">添加服务</button>
        </div>
        <div class="time_mask" v-if="isMask">
            <div class="time_ele">
                <p class="caozuo">
                    <span @click="openTime(false, false)">取消</span>
                    <span @click="openTime(false, true)">确定</span>
                </p>
                <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
            </div>
        </div>
        <div class="shanchu" v-if="isShan">
            <div class="shanchu_bai">
                <p>确定删除？</p>
                <div class="caozuo">
                    <span @click="shanchu('', false)">取消</span>
                    <span @click="queShan()">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Picker } from 'mint-ui';
    Vue.use(Picker);
    export default {
        name: 'myService',
        components: {
            Picker
        },
        data() {
            return {
                isMask: false,
                slots: [
                    {
                        flex: 1,
                        values: ["2", "5", "10", "15", "20"],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                timeChang: "请选择平均回复时长",
                serviceList: [],
                shangId: '',
                isShan: false,
                masterDate: ''
            }
        },
        methods: {
            onValuesChange(picker, values) {
                this.timeChang = values[0]
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
            },
            openTime(bool1, bool2) {
                this.isMask = bool1
                if(bool2) {
                    let params = {
                        id: this.$store.state.masterId,
                        replytime: this.timeChang
                    }
                    this.$http.fetchGet('UpdateMastertime', params).then(res => {
                        if(res.code == 200) {
                            this.$vux.toast.text('更改成功')
                        } else {
                            this.$vux.toast.text('更改失败')
                        }
                    }, err => {
                        console.log(err)
                    })
                }
            },
            shanchu(id, bool) {
                this.shangId = id
                this.isShan = bool
            },
            queShan() {
                let params = {
                    masterId: this.$store.state.masterId,
                    masterServiceId: this.shangId
                }
                console.log(params)
                this.$http.fetchGet('masterServiceDelete', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text('删除成功')
                        this.masterServiceList()
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
                this.isShan = false
            },
            masterServiceList() {
                let params = {
                    masterId: this.$store.state.masterId
                }
                this.$http.fetchGet('masterServiceList', params).then(res => {
                    if(res.code == 200) {
                        this.serviceList = res.data.yiyou;
                    } else {

                    }
                }, err => {
                    console.log(err)
                })
            },
            addService() {
                this.$router.push({
                    path: '/setService'
                })
            },
            getmasterdetail() { // 大师详情
                let params = {
                    id: this.$store.state.masterId
                }
                this.$http.fetchGet('getmasterdetail', params).then(res => {
                    if(res.code == 200) {
                        this.timeChang = res.data.replytime;
                    } else {
                        console.log(res.msg)
                    }
                }, err => {

                })
            },
        },
        mounted() {
            this.masterServiceList()
            this.getmasterdetail()
        }
    }
</script>

<style lang="less" scoped>
    .my_service{
        // position: absolute;
        // top: 0;
        // bottom: 0;
        width: 100%;
        height: 100%;
        background: #f2f2f2;
        .pb(300);
        // .mb(300);
        display: flex;
        flex-direction: column;
        .title{
            width: 100%;
            .h(88);
            .lh(88);
            .pl(20);
            .mb(10);
            box-sizing: border-box;
            font-weight: normal;
            background: #fff;
        }
        ul{
            width: 100%;
            .mb(10);
            li{
                width: 100%;
                display: flex;
                .lh(88);
                .padd(0, 20);
                background: #fff;
                border-bottom: 1px solid #f2f2f2;
                box-sizing: border-box;
                p{
                    flex: 1;
                }
                .price{
                    text-align: center;
                    color: #E73828;
                }
                .operation{
                    text-align: right;
                    display: flex;
                    span{
                        flex: 1;
                        color: #666666;
                    }
                }
            }
        }
        .time_inp{
            width: 100%;
            display: flex;
            .lh(88);
            background: #fff;
            .padd(0, 20);
            box-sizing: border-box;
            .time_tit{
                .w(150);
            }
            .duration{
                flex: 1;
                color: #999;
                text-align: center;
                .pr(100);
            }
            em{
                position: absolute;
                right: 0;
                .mr(20);
                color: #666;
                font-style: inherit;
            }
        }
        .time_mask{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .time_ele{
                position: absolute;
                bottom: 0;
                left: 0;
                background: #fff;
                width: 100%;
                .caozuo{
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        &:nth-child(1){
                            border-right: 1px solid #f2f2f2;
                        }
                    }
                }
            }
        }
        .shanchu{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .shanchu_bai{
                background: #fff;
                border-radius: 5px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(500);
                .h(350);
                p{
                    .lh(200);
                    text-align: center;
                }
                .caozuo{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    .lh(88);
                    display: flex;
                    span{
                        flex: 1;
                        width: 100%;
                        text-align: center;
                        border-top: 1px solid #f2f2f2;
                        &:nth-child(1){
                            border-right: 1px solid #f2f2f2;
                        }
                    }
                }
            }
        }
        .btn{
            width: 100%;
            .h(176);
            background: #fff;
            .padd(0, 20);
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            button{
                width: 100%;
                .h(88);
                border: none;
                background: #189BEB;
                color: #fff;
                border-radius: 5px;
                .mt(44);
            }
        }
    }
</style>
